<script setup lang="ts">
import { ref } from 'vue'
import TemplateCard from './TemplateCard.vue'

// 定义模板接口
interface Template {
  id: string;
  name: string;
  image: string;
  techStack: string[];
  description: string;
  details?: {
    features: string[];
    screens: string[];
  }
}

// 模拟模板数据
const templates = ref<Template[]>([
  {
    id: 'blank',
    name: '空白项目',
    image: 'https://via.placeholder.com/400x250?text=New+Project',
    techStack: ['自定义'],
    description: '从头开始创建一个全新的项目，选择您最喜欢的技术栈。',
    details: {
      features: [
        '完全自定义项目结构',
        '选择您喜欢的框架和库',
        '零配置或完全自定义配置'
      ],
      screens: [
        'https://via.placeholder.com/800x500?text=Blank+Project'
      ]
    }
  },
  {
    id: '1',
    name: 'React 电商模板',
    image: 'https://via.placeholder.com/400x250?text=React+E-commerce',
    techStack: ['React', 'Redux', 'Tailwind CSS'],
    description: '一个完整的电商网站前端模板，包含商品列表、详情页、购物车和结账流程。',
    details: {
      features: [
        '响应式商品网格',
        '购物车管理',
        '用户认证',
        '支付集成'
      ],
      screens: [
        'https://via.placeholder.com/800x500?text=Homepage',
        'https://via.placeholder.com/800x500?text=Product+Detail',
        'https://via.placeholder.com/800x500?text=Cart'
      ]
    }
  },
  {
    id: '2',
    name: 'Vue 博客平台',
    image: 'https://via.placeholder.com/400x250?text=Vue+Blog',
    techStack: ['Vue', 'Vuex', 'Markdown'],
    description: '一个现代化的博客平台，支持Markdown编辑和实时预览。',
    details: {
      features: [
        'Markdown编辑器',
        '代码高亮',
        '评论系统',
        '搜索功能'
      ],
      screens: [
        'https://via.placeholder.com/800x500?text=Blog+Home',
        'https://via.placeholder.com/800x500?text=Article+View',
        'https://via.placeholder.com/800x500?text=Editor'
      ]
    }
  },
  {
    id: '3',
    name: 'Angular 仪表盘',
    image: 'https://via.placeholder.com/400x250?text=Angular+Dashboard',
    techStack: ['Angular', 'TypeScript', 'D3.js'],
    description: '功能强大的管理仪表盘，包含多种数据可视化图表和实时数据更新。',
    details: {
      features: [
        '实时图表',
        '数据筛选',
        '用户管理',
        '报表导出'
      ],
      screens: [
        'https://via.placeholder.com/800x500?text=Dashboard+Overview',
        'https://via.placeholder.com/800x500?text=Analytics',
        'https://via.placeholder.com/800x500?text=User+Management'
      ]
    }
  },
  {
    id: '4',
    name: 'Node.js API服务器',
    image: 'https://via.placeholder.com/400x250?text=Node.js+API',
    techStack: ['Node.js', 'Express', 'MongoDB'],
    description: '一个完整的RESTful API服务器模板，包含认证、权限和数据库集成。',
    details: {
      features: [
        'JWT认证',
        'CRUD操作',
        '文件上传',
        '数据验证'
      ],
      screens: [
        'https://via.placeholder.com/800x500?text=API+Documentation',
        'https://via.placeholder.com/800x500?text=Database+Schema',
        'https://via.placeholder.com/800x500?text=Authentication+Flow'
      ]
    }
  },
  {
    id: '5',
    name: 'Python 数据分析平台',
    image: 'https://via.placeholder.com/400x250?text=Python+Data',
    techStack: ['Python', 'Flask', 'Pandas'],
    description: '数据科学平台，提供数据处理、分析和可视化工具。',
    details: {
      features: [
        '数据导入导出',
        '机器学习模型',
        '交互式图表',
        '批处理任务'
      ],
      screens: [
        'https://via.placeholder.com/800x500?text=Data+Import',
        'https://via.placeholder.com/800x500?text=Analysis+View',
        'https://via.placeholder.com/800x500?text=Results+Dashboard'
      ]
    }
  },
  {
    id: '6',
    name: 'React Native移动应用',
    image: 'https://via.placeholder.com/400x250?text=React+Native+App',
    techStack: ['React Native', 'GraphQL', 'Firebase'],
    description: '跨平台移动应用模板，支持iOS和Android。',
    details: {
      features: [
        '离线支持',
        '推送通知',
        '社交登录',
        '定位服务'
      ],
      screens: [
        'https://via.placeholder.com/800x500?text=App+Home',
        'https://via.placeholder.com/800x500?text=User+Profile',
        'https://via.placeholder.com/800x500?text=Notifications'
      ]
    }
  }
])

// 选择模板事件处理器
const emit = defineEmits(['select-template'])

const selectTemplate = (template: Template) => {
  console.log('在网格中选择模板:', template.name)
  emit('select-template', template)
}
</script>

<template>
  <div class="template-section">
    <h2 class="section-title">可用模板</h2>
    
    <div class="template-grid">
      <TemplateCard 
        v-for="template in templates" 
        :key="template.id"
        :template="template"
        @select="selectTemplate"
      />
    </div>
  </div>
</template>

<style scoped>
.template-section {
  margin: 2rem 0;
}

.section-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .template-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .template-grid {
    grid-template-columns: 1fr;
  }
}
</style> 